<template>
	<view class="pageView">
		<!-- @change="swiperchange" -->
		<swiper class="swiper" :current="current">
			<swiper-item class="swiper_item" v-for="(item, index) in viList" :key="index">
				<image :src="item.img" mode=""></image>
			</swiper-item>
		</swiper>
		<!-- <u-popup :show="show" bgColor="transparent" closeIconPos="top-right" :closeable="true" :closeOnClickOverlay="true" round="14" mode="center" @close="close">
			<view class="tc">
				<image @click="goPage" :src="ImgUrl + ad_img" class="tc_img" mode=""></image>
			</view>
		</u-popup> -->
		<view v-for="(item, index) in pageBlock" :key="index">
			<view class="pageBlock">
				<view class="pageBlock-title" :style="{
					background: `url(${item.bgImg}) no-repeat 100% 100%`
				}">{{ item.title }}</view>
				<view class="pageBlock-contentBlock">
					<view class="pageBlock-contentBlock-top" :style="{
						background: `url(${ImgUrl}images/pageBlockBottomFirst.png) no-repeat`
					}">
						<view>
							<view class="pageBlock-contentBlock-top-title">{{ item.topTitle }}</view>
							<view class="pageBlock-contentBlock-top-content">{{ item.topContent }}</view>
						</view>
						<view class="pageBlock-contentBlock-top-btn">
							<view class="btnBg" @click="handleClick(item)" :style="{
								background: `url(${ImgUrl}images/buttonBg.png) no-repeat`
							}"></view>
						</view>
					</view>
					<view class="pageBlock-contentBlock-bottom">
						<view class="pageBlock-contentBlock-bottom-left" @click="handleLearnClick(index + 1)" :style="{
							background: `url(${ImgUrl}images/pageBlockBottomRight.png) no-repeat`
						}">
							<view class="pageBlock-contentBlock-bottom-left-title">{{ item.bottomLeftTitle }}</view>
							<view class="pageBlock-contentBlock-bottom-left-content">{{ item.bottomLeftContent }}</view>
						</view>
						<view class="pageBlock-contentBlock-bottom-right" @click="handleExamineClick(item)" :style="{
							background: `url(${ImgUrl}images/pageBlockBottomLeft.png) no-repeat`
						}">
							<view class="pageBlock-contentBlock-bottom-right-title">{{ item.bottomRightTitle }}</view>
							<view class="pageBlock-contentBlock-bottom-right-content">{{ item.bottomRightContent }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<image :src="ImgUrl + 'images/homeBottom.png'" style="width: 694rpx;height: 322rpx;margin-top: 24rpx;"></image>
	</view>
</template>

<script>
import { banner, ad, indexPage} from '@/api/common.js';
export default {
	data() {
		return {
			current: 0,
			show: false,
			viList: [
				{
					img: this.$ImgUrl + 'images/banner.png'
				}
			],
			ImgUrl:this.$ImgUrl,
			ad_list:[],
			ad_index:0,
			ad_img:'',
			pageBlock: [
				{
					title: '陪诊师入驻',
					pageLk: '陪诊师',
					bgImg: this.$ImgUrl + 'images/pageBlockBottomTop.png',
					topTitle: '陪诊师报名',
					topContent: '线下陪诊师，全新的职业角色',
					bottomLeftTitle: '内容学习',
					bottomLeftContent: '在线学习视频',
					bottomRightTitle: '考核',
					bottomRightContent: '在线完成考核',
					erCode: '',
					peopleStatus: '',
					agreement: '',
					channel: '1'
				},
				{
					title: '临床观察员入驻',
					pageLk: '临床观察员',
					bgImg: this.$ImgUrl + 'images/pageBlockBottomMiddle.png',
					topTitle: '临床观察员报名',
					topContent: '线下陪诊师，全新的职业角色',
					bottomLeftTitle: '内容学习',
					bottomLeftContent: '在线学习视频',
					bottomRightTitle: '考核',
					bottomRightContent: '在线完成考核',
					erCode: '',
					peopleStatus: '',
					agreement: '',
					channel: '2'
				},
				{
					title: '医生经纪人入驻',
					pageLk: '医生经纪人',
					bgImg: this.$ImgUrl + 'images/pageBlockBottomBottom.png',
					topTitle: '医生经纪人报名',
					topContent: '线下陪诊师，全新的职业角色',
					bottomLeftTitle: '内容学习',
					bottomLeftContent: '在线学习视频',
					bottomRightTitle: '考核',
					bottomRightContent: '在线完成考核',
					erCode: '',
					peopleStatus: '',
					agreement: '',
					channel: '3'
				}
			]
		};
	},
	onLoad(options) {
		this.getIndexData()
		// this.getbanner();
		// this.getad()
		// 调用播放视频方法
		// this.startUp()
	},
	onShareTimeline(){
		
	},
	onShareAppMessage(){
		
	},
	methods: {
		getIndexData() {
			indexPage().then(res => {
				const {code, data} = res
				console.log(data)
				if (code == 200001) {
					this.pageBlock[0].erCode = data.config.staff_img
					this.pageBlock[1].erCode = data.config.middleman_img
					this.pageBlock[2].erCode = data.config.watcher_img
					this.pageBlock[0].agreement = data.config.staff_agreement
					this.pageBlock[1].agreement = data.config.middleman_agreement
					this.pageBlock[2].agreement = data.config.watcher_agreement
					this.pageBlock[0].peopleStatus = data.staff_status
					this.pageBlock[1].peopleStatus = data.middleman_status
					this.pageBlock[2].peopleStatus = data.watcher_status
				}
			})
		},
		handleClick(item) {
			uni.setStorageSync('itemData', {
				title: item.pageLk,
				ercode: item.erCode,
				agreement: item.agreement,
				channel: item.channel
			})
			uni.navigateTo({
				url: '/pages/accompanyingPhysicianRegistration/accompanyingPhysicianRegistration'
			})
		},
		handleLearnClick(index) {
			uni.setStorageSync('channel', index)
			uni.navigateTo({
				url: '/pages/contentLearning/contentLearning',
			})
		},
		handleExamineClick(item) {
			if (item.peopleStatus == 1) {
				uni.setStorageSync('itemData', {
					title: item.pageLk,
					ercode: item.erCode
				})
				uni.navigateTo({
					url: '/pages/examinePage/examinePage',
				})
			} else {
				uni.showToast({
					icon: 'error',
					title: `请先报名${item.pageLk}`
				})
			}
		},
		goPage(){
			let url = this.ad_list[this.ad_index].link;
			// console.log(url,'cs-cs');
			uni.navigateTo({
				url
			})
		},
		checkTv(img) {
			let index = img.indexOf('.');
			let type = img.substring(index); //截断"."之前的，得到后缀
			// console.log(type)
			let list = ['.mp4','.rmvb','.avi','.ts']
			if (list.indexOf(type) != -1 ) {
				//根据后缀，判断是否符合视频格式
				return false;
			}else{
				return true;
			}
		},
		getad(){
			let t = this
			ad().then(res=>{
				console.log(res)
				if(res.code == 200001){
					t.ad_list = res.data
					t.ad_img = t.ad_list[t.ad_index].img
					t.show = true
				}
			})
		},
		getbanner() {
			let t = this
			banner({
				to: 'xia'
			}).then((res) => {
				console.log(res);
				if(res.code == 200001){
					t.viList = res.data.data
					
				}
			});
		},
		// // 进页面时播放视频
		//   startUp(){
		//     // 获取video节点
		//     let createVideoContext = wx.createVideoContext('video0')
		//     // 播放视频
		//     createVideoContext.play()
		//   },

		//   swiperchange(e) {
		// // 播放当前页面视频
		// for(let i in this.viList){
		// 	let index1 = 'video' + e.detail.current
		// 	this.pauseVio(index1)
		// }
		//       let index = 'video' + e.detail.current
		//       this.playVio(index)

		//   },
		// // 播放视频
		//   playVio(index){
		//     // 获取video节点
		//     let createVideoContext = wx.createVideoContext(index)
		//     // 播放视频
		// 	createVideoContext.seek(0)
		//     createVideoContext.play()
		//   },

		// 暂停视频
		// pauseVio(index){
		//   // 获取video节点
		//   let createVideoContext = wx.createVideoContext(index)
		//   // 暂停视频
		//   createVideoContext.pause()
		// },
		close() {
			this.show = false;
			if (this.ad_index < (this.ad_list.length - 1)) {
				this.ad_index = this.ad_index + 1;
				setTimeout(res=>{
					this.show = true;
				},500)
			}
		}
	}
};
</script>

<style lang="less" scoped>
	.pageView{
		padding: 16rpx 28rpx 16rpx 28rpx;
		height: 100%;
		background: #F4F4F4;
		.swiper {
			width: 100%;
			height: 280rpx;
		}
		.pageBlock{
			margin-top: 24rpx;
			width: 100%;
			height: 460rpx;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			border: 2rpx solid #FFFFFF;
			&-title{
				height: 92rpx;
				background: linear-gradient( 270deg, #DBEDFF 0%, #F0F5FA 100%);
				font-weight: 500;
				font-size: 36rpx;
				color: #000000;
				border-top-left-radius: 16rpx;
				border-top-right-radius: 16rpx;
				display: flex;
				align-items: center;
				padding-left: 24rpx;
			}
			&-contentBlock{
				padding: 24rpx;
				&-top{
					width: 646rpx;
					height: 160rpx;
					background-size: 100% 100%;
					display: flex;
					justify-content: space-between;
					border-radius: 12rpx 12rpx 12rpx 12rpx;
					&-title{
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #000000;
						padding: 40rpx 0px 0px 20rpx;
						line-height: 42rpx;
					}
					&-content{
						padding-left: 20rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 22rpx;
						color: #8D9191;
						line-height: 36rpx;
					}
					&-btn{
						padding-top: 96rpx;
						padding-right: 20rpx;
						.btnBg{
							width: 142rpx;
							height: 44rpx;
							background-size: 100% 100%;
						}
					}
				}
				&-bottom{
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 12rpx;
					&-left{
						padding-top: 26rpx;
						padding-left: 20rpx;
						width: 290rpx;
						height: 128rpx;
						background-size: 100% 100%;
						border-radius: 12rpx 12rpx 12rpx 12rpx;
						&-title{
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 28rpx;
							color: #000000;
							line-height: 42rpx;
						}
						&-content{
							padding-top: 12rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 22rpx;
							color: #8D9191;
							line-height: 36rpx;
						}
					}
					&-right{
						padding-top: 26rpx;
						padding-left: 20rpx;
						width: 290rpx;
						height: 128rpx;
						background-size: 100% 100%;
						border-radius: 12rpx 12rpx 12rpx 12rpx;
						&-title{
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 28rpx;
							color: #000000;
							line-height: 42rpx;
						}
						&-content{
							padding-top: 12rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 22rpx;
							color: #8D9191;
							line-height: 36rpx;
						}
					}
				}
			}
		}
	}
	.swiper {
		width: 100%;
		height: 280rpx;
	}
	/deep/ .swiper_item {
		width: 100% !important;
		height: 280rpx !important;
	}
	.swiper_item video {
		width: 100%;
		height: 280rpx;
	}
	.swiper_item image{
		width: 100%;
		height: 280rpx;
	}
	/* .tc {
		width: 646rpx;
		height: 646rpx;
		border-radius: 28rpx;
		background: #fff;
		position: relative;
	}
	.tc_img {
		width: 100%;
		height: 100%;
		border-radius: 28rpx;
		background: #fff;
	}
	.tc_clase {
		width: 94rpx;
		height: 94rpx;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: -142rpx;
	} */
</style>
